<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:insert="~{include :: header('设备指令管理')}" />
    <style>
        /* JSON数据显示样式 */
        .json-preview {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-family: 'Courier New', monospace;
            font-size: 13px;
            padding: 8px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
    </style>
</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>设备ID：</label>
                            <input type="text" name="deviceId" placeholder="设备ID">
                        </li>
                        <li>
                            <label>指令类型：</label>
                            <input type="text" name="commandType" placeholder="指令类型">
                        </li>
                        <li>
                            <label>状态：</label>
                            <select class="form-control" name="status">
                                <option value="">全部状态</option>
                                <option value="WAITING">待发送</option>
                                <option value="SENT">已发送</option>
                                <option value="COMPLETED">执行成功</option>
                                <option value="FAILED">执行失败</option>
                                <option value="TIMEOUT">超时</option>
                            </select>
                        </li>
                        <li>
                            <a
                                    class="btn btn-primary btn-rounded btn-sm"
                                    onclick="$.table.search()"
                            ><i class="fa fa-search"></i>&nbsp;搜索</a
                            >
                            <a
                                    class="btn btn-warning btn-rounded btn-sm"
                                    onclick="$.form.reset()"
                            ><i class="fa fa-refresh"></i>&nbsp;重置</a
                            >
                        </li>
                    </ul>
                </div>
            </form>
        </div>

        <div class="btn-group-sm" id="toolbar" role="group">
            <a class="btn btn-success" onclick="add()" shiro:hasPermission="deviceManager:command:add">
                <i class="fa fa-plus"></i>&nbsp;新增
            </a>
            <a class="btn btn-primary single disabled" onclick="edit()" shiro:hasPermission="deviceManager:command:edit">
                <i class="fa fa-edit"></i>&nbsp;修改
            </a>
            <a class="btn btn-danger multiple disabled" onclick="batchRemove()" shiro:hasPermission="deviceManager:command:remove">
                <i class="fa fa-remove"></i>&nbsp;删除
            </a>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </div>
</div>
<th:block th:insert="~{include :: footer}" />
<script th:inline="javascript">
    /*<![CDATA[*/
    var editFlag = [[${@permission.hasPermi('deviceManager:command:edit')}]];
    var removeFlag = [[${@permission.hasPermi('deviceManager:command:remove')}]];
    var prefix = ctx + "deviceManager/command";
    var datas = /*[[${@dict.getType('device_command_type')}]]*/ [];

    $(function() {
        var options = {
            url: prefix + "/list",
            createUrl: prefix + "/add",
            updateUrl: prefix + "/edit/{id}",
            removeUrl: prefix + "/remove",
            exportUrl: prefix + "/export",
            showExport: false,
            modalName: "设备指令",
            uniqueId: 'commandId',
            columns: [
                {
                    checkbox: true
                },
                {
                    field: 'commandId',
                    title: '指令ID',
                    visible: false
                },
                {
                    field: 'deviceId',
                    title: '设备ID'
                },
                {
                    field: 'commandType',
                    title: '指令类型',
                    formatter: function(value, row, index) {
                        //console.log('指令类型 ', value)
                        return value;
                        //return $.table.selectDictLabel(datas, value);
                    }
                },
                {
                    field: 'commandContent',
                    title: '指令内容',
                    formatter: function(value, row, index) {
                        var content = value || '';
                        
                        // 确保content是字符串类型
                        if (typeof content !== 'string') {
                            content = String(content);
                        }
                        
                        try {
                            // 尝试解析JSON字符串
                            var parsedData = JSON.parse(content);
                            // 将解析后的数据转换回字符串
                            var jsonStr = JSON.stringify(parsedData, null, 2);
                            // 去除转义字符
                            jsonStr = jsonStr.replace(/\\r\\n/g, '').replace(/\\n/g, '').replace(/\\t/g, '');
                            
                            // 限制显示长度为50个字符
                            const MAX_DISPLAY_LENGTH = 50;
                            if (jsonStr.length > MAX_DISPLAY_LENGTH) {
                                // 截取前MAX_DISPLAY_LENGTH个字符并添加省略号
                                const truncatedStr = jsonStr.substring(0, MAX_DISPLAY_LENGTH) + '...';
                                return '<div class="json-preview" title="点击查看完整数据" onclick="showCommandDetail(\'' + row.commandId + '\')" style="cursor: pointer;">' + truncatedStr + '</div>';
                            } else {
                                return '<div class="json-preview" title="点击查看完整数据" onclick="showCommandDetail(\'' + row.commandId + '\')" style="cursor: pointer;">' + jsonStr + '</div>';
                            }
                        } catch (e) {
                            // 如果不是JSON字符串，直接显示并处理长字符串
                            const MAX_DISPLAY_LENGTH = 50;
                            if (content.length > MAX_DISPLAY_LENGTH) {
                                // 截取前MAX_DISPLAY_LENGTH个字符并添加省略号
                                const truncatedStr = content.substring(0, MAX_DISPLAY_LENGTH) + '...';
                                return '<div class="json-preview" title="点击查看完整数据" onclick="showCommandDetail(\'' + row.commandId + '\')" style="cursor: pointer;">' + truncatedStr + '</div>';
                            } else {
                                return '<div class="json-preview" title="点击查看完整数据" onclick="showCommandDetail(\'' + row.commandId + '\')" style="cursor: pointer;">' + content + '</div>';
                            }
                        }
                    }
                },
                {
                    field: 'status',
                    title: '指令状态',
                    formatter: function(value) {
                        var statusClass = '';
                        var statusText = '';
                        switch (value) {
                            case 'WAITING':
                                statusClass = 'label-warning';
                                statusText = '待发送';
                                break;
                            case 'SENT':
                                statusClass = 'label-info';
                                statusText = '已发送';
                                break;
                            case 'COMPLETED':
                                statusClass = 'label-success';
                                statusText = '执行成功';
                                break;
                            case 'FAILED':
                                statusClass = 'label-danger';
                                statusText = '执行失败';
                                break;
                            case 'TIMEOUT':
                                statusClass = 'label-default';
                                statusText = '超时';
                                break;
                        }
                        return '<span class="label ' + statusClass + '">' + statusText + '</span>';
                    }
                },
                {
                    field: 'retryCount',
                    title: '重试次数'
                },
                {
                    field: 'sendTime',
                    title: '下发时间',
                    visible: false
                },
                {
                    field: 'executeTime',
                    title: '完成时间',
                    visible: false
                },
                {
                    field: 'expirationTime',
                    title: '过期时间',
                    visible: false
                },
                {
                    field: 'createTime',
                    title: '创建时间'
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        if (row.status === 'WAITING') {
                            actions.push('<a class="btn btn-xs btn-info" href="javascript:void(0)" onclick="sendCommand(\'' + row.commandId + '\')" title="发送指令">');
                            actions.push('  <i class="fa fa-paper-plane-o"></i> 发送');
                            actions.push('</a> ');
                        }
                        actions.push('<a class="btn btn-xs btn-primary ' + editFlag + '" href="javascript:void(0)" onclick="$.operate.edit(\'' + row.commandId + '\')" title="编辑">');
                        actions.push('  <i class="fa fa-edit"></i> 编辑');
                        actions.push('</a> ');
                        actions.push('<a class="btn btn-xs btn-danger ' + removeFlag + '" href="javascript:void(0)" onclick="$.operate.remove(\'' + row.commandId + '\')" title="删除">');
                        actions.push('  <i class="fa fa-trash"></i> 删除');
                        actions.push('</a> ');
                        return actions.join('');
                    }
                }
            ]
        };
        $.table.init(options);
    });

    function add() {
        $.modal.open("新增设备指令", prefix + "/add");
    }

    function sendCommand(commandId) {
        $.modal.confirm("确定要发送此指令吗？", function() {
            $.ajax({
                type: "post",
                url: prefix + "/send",
                data: {"commandId": commandId},
                dataType: "json",
                success: function(result) {
                    $.operate.successCallback(result);
                }
            });
        });
    }

    /**
     * 查看指令详情
     */
    function showCommandDetail(commandId) {
        $.modal.open("设备指令详情", prefix + "/detail/" + commandId);
    }

    /*]]>*/
</script>
</body>
</html>